<template>
    <xDataSpreadsheet class="p-reportClient"
        :config="config"
        :customConfig="customConfig"
        :templateData="templateData"
        :bindData="bindData"
        :loading="loading"
    >
        <template slot="toolbar">
            <!-- <Button @click="loadTemplate" type="primary">加载模板数据</Button> -->
            <form-create
                v-model="fapi" :rule="fields" :option="option" :value="formData"
                @submit="onSubmit" @change="onChange"
            ></form-create>
        </template>
    </xDataSpreadsheet>
</template>

<script>
import * as defaultTemplateData from '../ProcessCostConfig/templateData'
import { getYearOption, getMonthOption, getCurDate } from '../ProcessCostConfig/utils'
import xDataSpreadsheet from 'public/components/spreadSheet'

export default {
    components: { xDataSpreadsheet },
    data() {
        let curDate = getCurDate()
        return {
            id: 33,
            loading: false,
            config: {},
            customConfig: {
                showUpload: false,
                showExport: false,
                showSave: false,
                showLoadData: false,
                isReport: true
            },
            templateData: [],
            bindData: {},
            // 筛选表单formCreate的配置：http://www.form-create.com/v2/iview/global.html
            option: {
                form: {
                    inline: true,
                    labelPosition: "right",
                    labelWidth: 80,
                    hideRequiredAsterisk: false,
                    showMessage: true,
                    inlineMessage: true,
                    size: 'default'
                },
                global: {
                },
                submitBtn: {
                    innerText: '查询'
                },
                resetBtn: false
            },
            fapi: {},
            formData: {
                year: curDate.year, month: curDate.month, keywords: ''
            },
            fields: [
                // 配置项可以参考：http://www.form-create.com/v2/iview/components/input.html
                {
                    type: 'select', field: 'year', title: '年份', options: getYearOption(9),
                    effect:{ required: true },
                },
                {
                    type: 'select', field: 'month', title: '月份', options: getMonthOption(9),
                    effect:{ required: true }, 
                },
                {
                    type: 'input', field: 'keywords', title: '关键词', props: { clearable: true}
                },
            ]
        }
    },
    mounted() {
        // 通过接口获取模板配置
        // setTimeout(() => {
            this.loadTemplate()
        // }, 1000);

        // 通过接口获取绑定数据
        // setTimeout(() => {
            this.loadData()
        // }, 3000);
    },
    methods: {
        loadTemplate1() {
            // 通过api查询 模板数据 ...
            this.loading = true
            setTimeout(() => {
                try {
                    this.loading = false
                    if (window.localStorage && window.localStorage.getItem('report_config')) {
                        this.templateData = JSON.parse(window.localStorage.getItem('report_config'))
                        return
                    }
                    this.templateData = defaultTemplateData.data
                } catch(err) {
                    this.templateData = defaultTemplateData.data
                    this.loading = false
                }
            }, 500)
        },
        loadTemplate() {
            this.$api.PageReport.query({
                id: this.id
            }).then(res => {
                console.log('loadTemplate', res);
                if (res && res.length && res[0].value && res[0].value.length) {
                    this.templateData = res[0].value
                } else {
                    this.templateData = defaultTemplateData.data
                }
            })
        },
        loadData() {
            // 通过api查询 绑定数据 ...
            this.loading = true
            setTimeout(() => {
                let data = defaultTemplateData.mockBindData()
                this.bindData = data
                this.loading = false
                console.log('loadData: ', JSON.stringify(data, null, 4));
            }, 1000);
        },
        onSubmit(filterData) {
            this.loadData(filterData)
        },
        onChange(field, value) {
            if (['year', 'month'].includes(field)) {
                console.log("🚀 ~ file: client.vue:82 ~ onChange", field, value, this.fapi)
                this.loadData()
            }
        }
    }
}
</script>

<style lang="less">
.p-reportClient {
    .toolbar {
        padding-bottom: 0;
    }
    .ivu-form-item {
        margin-bottom: 16px;
    }
}
</style>